<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<!--   3. 编写组件标签-->
<school></school>
    <hr>
    <!--    3.编写组件标签-->
    <student></student>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示
    //1.创建school组件，可省略Vue.extend（）
    const school =Vue.extend({
        template:`
          <div>
          <h2>学校名称：{{schoolName}}</h2>
          <h2>学校地址：{{address}}</h2>
          <button @click="showSchool()">点我一哈有惊喜</button>
          </div>
        `,
        //一定不要写el配置项，el只用于vm
        data(){
            return{
                schoolName:'哈哈',
                address:'四川南充'
            }
        },
        methods:{
            showSchool(){
                alert('hhhhhhh')
            }
        }
    })
    //1.创建student组件
    const student =Vue.extend({
        template:`
          <div>
          <h2>学生姓名：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
          </div>
        `,
        //一定不要写el配置项，el只用于vm
        data(){
            return{
                studentName:'小王',
                age:20
            }
        }
    })

    new Vue({
        el:'#root',
        //2.注册组件
       components:{
          school,
           student
       }
    })
</script>
</html>